chore: migrate example to react navigation static config#4965
Merged
Conversation
|
The mobile version of example app from this branch is ready! You can see it here. |
satya164
force-pushed
the
@satya164/static-config
branch
3 times, most recently
from
ca4b58c to
23b8a1e
Compare
satya164
force-pushed
the
@satya164/static-config
branch
from
23b8a1e to
fbac297
Compare
satya164
force-pushed
the
@satya164/static-config
branch
from
fbac297 to
ba23a98
Compare
There was a problem hiding this comment.
Pull request overview
This PR migrates the example app to React Navigation’s static configuration APIs, consolidating platform entry points and updating navigation-related dependencies to newer React Navigation v8 alpha releases.
Changes:
- Migrated the example navigators (drawer/stack/tabs) to static config (
createStaticNavigation,create*Navigator({ screens: ... })) and removed the separate native entry file. - Updated example screens and route IDs to match the new static config approach (e.g., hook-based navigation usage and renamed routes).
- Bumped React Navigation dependency versions in the root package, example package, and lockfile.
Reviewed changes
Copilot reviewed 18 out of 19 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Updates lockfile entries for newer @react-navigation/* alpha versions. |
| package.json | Bumps root dev dependency @react-navigation/native to a newer alpha. |
| example/package.json | Bumps example app @react-navigation/* dependencies to newer alphas. |
| example/src/index.tsx | Consolidates app bootstrap and navigation container logic using static navigation + persistence and RTL handling. |
| example/src/index.native.tsx | Removes the native-only entry file after consolidating bootstrap logic. |
| example/src/RootNavigator.tsx | Converts the root stack to static config screens + linking config. |
| example/src/ExampleList.tsx | Renames example route IDs and updates list navigation to match static config routes. |
| example/src/DrawerItems.tsx | Adjusts RTL toggle behavior to rely on centralized RTL handling in the entry file. |
| example/src/Examples/ThemingWithReactNavigation.tsx | Migrates the nested tab/stack example to static config navigators and updates route IDs. |
| example/src/Examples/TooltipExample.tsx | Switches to hook-based navigation access. |
| example/src/Examples/ThemeExample.tsx | Updates navigation usage and route name casing. |
| example/src/Examples/TeamsList.tsx | Updates navigation usage and route names for team detail linking. |
| example/src/Examples/TeamDetails.tsx | Switches to hook-based navigation/route access and makes params access resilient. |
| example/src/Examples/SegmentedButtonsExample.tsx | Switches to hook-based navigation and updates destination route names. |
| example/src/Examples/SearchbarExample.tsx | Switches to hook-based navigation and simplifies drawer opening call. |
| example/src/Examples/MenuExample.tsx | Switches to hook-based navigation access. |
| example/src/Examples/BottomNavigationExample.tsx | Switches to hook-based navigation access. |
| example/src/Examples/BottomNavigationBarExample.tsx | Migrates the bottom tabs example to static config screens and retains custom tab bar behavior. |
| example/src/Examples/AppbarExample.tsx | Switches to hook-based navigation access. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| async restore() { | ||
| const state = await AsyncStorage.getItem(PERSISTENCE_KEY); | ||
|
|
||
| return state ? JSON.parse(state) : undefined; |
Comment on lines
+38
to
+73
| ThemingHome: createBottomTabScreen({ | ||
| screen: HomeScreen, | ||
| options: { | ||
| tabBarIcon: Platform.select<BottomTabNavigationOptions['tabBarIcon']>({ | ||
| android: { | ||
| type: 'materialSymbol', | ||
| name: 'home', | ||
| }, | ||
| ios: { | ||
| type: 'sfSymbol', | ||
| name: 'house', | ||
| }, | ||
| default: ({ color, size }) => { | ||
| return <Icon name="home" size={size} color={color} />; | ||
| }, | ||
| }), | ||
| }, | ||
| }), | ||
| ThemingSettings: createBottomTabScreen({ | ||
| screen: SettingsScreen, | ||
| options: { | ||
| tabBarIcon: Platform.select<BottomTabNavigationOptions['tabBarIcon']>({ | ||
| android: { | ||
| type: 'materialSymbol', | ||
| name: 'settings', | ||
| }, | ||
| ios: { | ||
| type: 'sfSymbol', | ||
| name: 'gear', | ||
| }, | ||
| default: ({ color, size }) => { | ||
| return <Icon name="cog" size={size} color={color} />; | ||
| }, | ||
| }), | ||
| }, | ||
| }), |
satya164
force-pushed
the
@satya164/static-config
branch
from
ba23a98 to
cca22a4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.